问题描述：springboot中集成vue项目,由于要求用jar包部署方式,vue构建之后(路由为history模式)dist目录中文件直接放到/resources/static/底下,访问localhost:8080 可以访问到vue项目.路由跳转也没问题,但是问题是不能刷新和地址栏输入地址。

如果不是必须使用history模式的话，hash模式带#号完全不影响使用，不存在不能刷新和url输入访问的问题。history模式下,一刷新和输入地址都会被springboot的路由接管,报出error page.

当我们使用Vue开发时，一般会用到vue-router来作为前端路由，实现单页应用。vue-router提供了两种模式模拟一个完整的 URL：hash模式和history模式。

一、hash模式：使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。

//查看id为1的文章

http://localhost:8888/#/view/1

二、history模式：URL 就像正常的 url，比较好看。

//查看id为1的文章

http://localhost:8888/view/1

那么 vue-router默认是使用hash模式的，不需要额外的配置，如果我们想使用history模式该如何配置呢？

前端：vue-router的mode: ‘history’

const router = new VueRouter({

  mode: 'history',

  routes: [...]

})

后端：我是使用SpringBoot，要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。详细看vue-router的官方文档。

SpringBoot默认匹配不到URL时，会返回一个默认的页面，所以可以配置一下默认的配置Bean。具体配置参考下面的地址：

里面介绍了三种写法：

1、第一种写法：实现ErrorPageRegistrar

@Configuration

public class ErrorConfigurar implements ErrorPageRegistrar {

    @Override

    public void registerErrorPages(ErrorPageRegistry registry) {

        ErrorPage[] errorPages = new ErrorPage[2];

        errorPages[0] = new ErrorPage(HttpStatus.NOT_FOUND, "/404.html");

        errorPages[1] = new ErrorPage(HttpStatus.INTERNAL_SERVER_ERROR, "/500.html");

        registry.addErrorPages(errorPages);

    }

}

第二种写法：SpringBoot2.0之前的写法

@Bean

    public EmbeddedServletContainerCustomizer containerCustomizer() {

        return new EmbeddedServletContainerCustomizer() {

            @Override

            public void customize(ConfigurableEmbeddedServletContainer container) {

                ErrorPage errorPage404 = new ErrorPage(HttpStatus.NOT_FOUND, "404.html");

                container.addErrorPages(errorPage404);

            }

        };

    }

第三种：SpringBoot2.0之后的写法

@Configuration

public class ErrorPageConfig {

    /**

    * SpringBoot2.0以上版本WebServerFactoryCustomizer代替之前版本的EmbeddedWebServerFactoryCustomizerAutoConfiguration

    *

    * @return

    */

    //@Bean必须加上

    @Bean

    public WebServerFactoryCustomizer webServerFactoryCustomizer() {

//        //第一种：java7 常规写法

//        return new WebServerFactoryCustomizer() {

//            @Override

//            public void customize(ConfigurableWebServerFactory factory) {

//                ErrorPage errorPage404 = new ErrorPage(HttpStatus.NOT_FOUND, "/404.html");

//                factory.addErrorPages(errorPage404);

//            }

//        };

        //第二种写法：java8 lambda写法

        return (factory -> {

            ErrorPage errorPage404 = new ErrorPage(HttpStatus.NOT_FOUND, "/404.html");

            factory.addErrorPages(errorPage404);

        });

    }

}

参考地址：

vue-router路由使用 history 模式时，后端SpringBoot如何配置

SpringBoot2.0实现自定义404页面渲染